<template>
	<!-- 订单卡片 -->
	<view
		style="box-shadow: 5px 5px 5px #c3c3c3; border-radius: 0.5rem;width: 100%; background-color:white;margin-bottom: 0.8rem;">
		<!-- 卡片标题 -->
		<view style="display: flex; justify-content: space-between;">
			<view
				style="margin:0.5rem;font-size: 18px;font-weight: 1000;display: flex;justify-content: center;align-items: center;">
				{{name}}
			</view>

			<view style="padding: 0.5rem;" @tap="open"> <img :class="ifOpen?'openimg':'closeimg'" style="width: 0.8rem;"
					src="@/static/images/more.png" alt="" /></view>
		</view>
		<!-- 可折叠区域 -->
		<view :class="ifOpen?'openlist':'closelist'" style="font-size: 15px;">
			<view class="short-line">

			</view>
			<!-- 商品列表 -->
			<view style="display: flex;flex-direction: column; ">
				<!-- 商品 -->
				<view v-for="item,index in list.orderProductList"
					style="margin-top: 0.5rem; margin-left: 1rem;margin-right: 1rem;">
					<view>{{item.pmsProduct.productName}}</view>
					<view style="width: 100%; display: flex;height: 2rem;align-items: center;">
						<view style="flex: 20% 0 0 0; width: 20%;">价格:{{item.pmsProduct.price}}</view>
						<view style="flex: 0 50% 0 0;width: 50%;">
							<view style="display: flex;align-items: center;">
								<view style="flex:30% 0;margin-left: auto;">数量:</view>
								<uni-number-box :min="1" style="flex:0 70%;margin-left: auto;" @change="changeValue"
									v-model="item.productNumber" />
							</view>
						</view>
						<view style="flex: 0 0 20% 0;width: 20%;margin-left: auto;">
							小计:{{item.productNumber*item.pmsProduct.price}}</view>
							<view v-if="dateLimit" style="flex: 0 0 0 10%;width: 10%;margin-left: auto;color:red;font-size: small;" @click="del(index)">
								删除</view>
					</view>
					<view v-if="index != list.length-1" class="short-line-goods"></view>
				</view>
				<view style="height: 0.5rem;"></view>
				<view class="short-line"></view>
			</view>
			<!-- 卡片底部 -->
			<view style="margin:1rem;display: flex;">
				<view>总价:{{totalAll}}</view>
			<!-- v-if="dateLimit" -->
				<view v-if="dateLimit" style="color: cornflowerblue;margin-left: auto;display: flex;" >
					<view style="color: red;margin-right: 0.5rem;flex:1" @click="delOrderItem(list)">
						删除
					</view>
					<view v-if="!loadingButton" @click="sumbit">
						修改
					</view>
				</view>
			</view>
		</view>

		<!-- 提示信息弹窗 -->
		<uni-popup ref="popup" type="message">
			<uni-popup-message type="success" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>

	</view>
</template>

<script>
	import {
		listOrder,
		getOrderProductList,
		updateOrderProducts,
		addOrderProducts,
		delOrder
	} from '@/api/system/order.js';
	export default {

		name: "order-card",
		props: {
			index: {
				type: Number,
				required: false,
			},
			// 检测类型 + 其他验证
			name: {
				type: String,
				default: "批次名称",
				required: false,
			},
			totalAmount: {
				type: Number,
				default: 0,
				required: false,
			},
			list: {
				type: Object,
				required: false
			},
			ifOpen: {
				tyoe: Boolean,
				default: false,
				required: false,
			}
		},
		onLoad() {
			this.calculation();
		},
		data() {
			return {
				total: 0,
				msgType: "info",
				messageText: "修改成功",
				loadingButton:false,
			};
		},
		methods: {
			delOrderItem(e){
				console.log(e.omsOrder.orderId)
				debugger
				delOrder(e.omsOrder.orderId).then(resq=>{
					this.$emit('delItem',this.index);
					this.messageText = "删除成功";
					this.$refs.popup.open();	
				})
			},
			open() {
				this.ifOpen = !this.ifOpen
			},
			del(e){
				this.list.orderProductList.splice(e,1);
			},
			changeValue(e) {
				this.calculation();
			},
			calculation() {
				console.log(this.total)
				let total = 0;
				this.list.orderProductList.forEach(e => {
					total += e.pmsProduct.price * e.productNumber;
				})
				this.total = total;
			},
			sumbit() {
				this.loadingButton = true;
				updateOrderProducts(this.list).then((res) => {
					this.$refs.popup.open()
					this.loadingButton = false;
				}).catch(()=>{
					this.loadingButton =false;
				})
			},


		},
		computed:{
			totalAll(){
				let total = 0;
				this.list.orderProductList.forEach(e => {
					total += e.pmsProduct.price * e.productNumber;
				})
				this.total = total;
				return total;
			},
			dateLimit(){
				let date = new Date();
				if( date>Date.parse(this.list.batch.timeLimitStart) && date<Date.parse(this.list.batch.timeLimitEnd)){
					return true;
				}
				return false;
				
			},
		},
	}
</script>

<style lang="scss">
	.short-line {
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		/* 1像素的黑色横线 */
		// width: 100%;
		height: 0;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
		// justify-self: center;
		// align-self: center;
		/* 确保线条不占据空间 */
		// margin-top: 0.2rem;
	}

	.short-line-goods {
		border-top: 1px solid rgba(0, 0, 0, 0.05);
		/* 1像素的黑色横线 */
		width: 80%;
		height: 0;
		/* 确保线条不占据空间 */
		// margin-top: 0.2rem;
	}

	.openlist {
		// max-height: 500px;
		// transition: 1s ease;
	}

	.closelist {
		height: 0;
		overflow: hidden;
		// transition:  1s ease ;
	}

	.openimg {
		transform: rotate(-90deg);
	}

	.closeimg {
		transform: rotate(0deg);
	}
</style>